<template>
	<view class="container">

		<view class="dataTable">
			<view class="dataTable-canvas">

				<canvas id="myEcharts"></canvas>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		selectHotelRoomByRoomId
	} from "@/api/system/room"
	import {
		selectHotelRoomAnalysis
	} from "@/api/system/room"
	import * as echarts from 'echarts';

	export default {
		data() {
			return {
				// 这里初始化一个null，待会儿用来充当echarts实例
				myChart: null,
				hotelRoom: [],
				hotelRoomAnalysis:{},
				searchParams:{},
				dateRange:['2024-04-01','2028-04-01'],
				roomId: 0,
				hotelId:0,
			}
		},
		methods: {
			selectHotelRoomByRoomId() {
				selectHotelRoomByRoomId(this.roomId).then(response => {
					this.hotelRoom = response.data
				})
			},
			selectHotelRoomAnalysis(){
				let that = this;
				selectHotelRoomAnalysis(this.addDateRange({hotelId:this.hotelId,id:this.roomId}, this.dateRange)).then(response => {
					let data = response.data
					// 通过nextTick异步画图
					this.$nextTick(() => {
						that.drawLines();
					});
				})
			},
			// 添加日期范围
			addDateRange(params, dateRange, propName) {
				let search = params;
				search.params = typeof(search.params) === 'object' && search.params !== null && !Array.isArray(search
					.params) ? search.params : {};
				dateRange = Array.isArray(dateRange) ? dateRange : [];
				if (typeof(propName) === 'undefined') {
					search.params['beginTime'] = dateRange[0];
					search.params['endTime'] = dateRange[1];
				} else {
					search.params['begin' + propName] = dateRange[0];
					search.params['end' + propName] = dateRange[1];
				}
				return search;
			},
			async drawLines() {
				// 这里是初始化的方式，通过id查询找到你的canvas标签
				this.myChart = echarts.init(document.getElementById('myEcharts'));
				// 这里我初始化了4个数组用来存放 后端接口给我的数据

				const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
				const dateList = data.map(function (item) {
				  return item[0];
				});
				const valueList = data.map(function (item) {
				  return item[1];
				});
				
				const option = {
					// Make gradient line here
					visualMap: [{
							show: false,
							type: 'continuous',
							seriesIndex: 0,
							min: 0,
							max: 400
						}
					],
					title: [{
							left: 'center',
							text: '房价变动'
						}
					],
					tooltip: {
						trigger: 'axis'
					},
					xAxis: [
						{
							data: dateList
						}
					],
					yAxis: [{},
						
					],
					grid: [{
							bottom: '60%'
						},
						{
							top: '60%'
						}
					],
					series: [
						{
							type: 'line',
							showSymbol: false,
							data: valueList
						}
					]
				};


				// 这里不要忘记把option设置给echarts实例
				this.myChart.setOption(option);


			}

		},
		mounted(){
		      //这两行代码解决在小程序中echarts点击失效问题
		      this.$echarts.env.touchEventsSupported = false;
		      this.$echarts.env.wxa = false;
		    },

		onLoad(event) {
			if (event.roomId) {
				this.roomId = event.roomId
				this.hotelId = event.hotelId
				this.selectHotelRoomByRoomId();
				this.selectHotelRoomAnalysis();

			}
		},
		beforeDestroy() {
			// 页面关闭时销毁echarts实例
			this.myChart.clear();
			this.myChart.dispose();
		},
	}
</script>

<style lang="scss" scoped>
	.dataTable {
		padding: 20rpx;
		width: 100%;
		height: 100%;

		&-canvas {
			&-title {
				padding: 20rpx 0rpx;

				>text {
					padding-left: 20rpx;
					width: 100%;
					height: 100%;
					font-size: 32rpx;
					font-weight: 550;
					line-height: 32rpx;
					border-left: 10rpx solid #28b5b1;
				}
			}

			#myEcharts {
				width: 100%;
				height: 1200rpx;
			}
		}
	}
</style>